import React, { useEffect, useState } from 'react'

// http://geek.itheima.net/v1_0/user/channels
// 请求数据并渲染

export default function App() {
  const [list, setList] = useState([])
  useEffect(() => {
    // fetch 对象是浏览器新增的发请求的 API，用来替代 XMLHttpRequest 对象
    const getList = async () => {
      const res = await fetch('http://geek.itheima.net/v1_0/user/channels')
      // 如果后端返回的数据是 JSON 格式的字符串，需要 res.json() 进行解析，同时 res.json() 的返回结果是一个 Promise
      const {
        data: { channels },
      } = await res.json()
      // !存储到 list 数组中
      setList(channels)
    }
    // !记得调用
    getList()
  }, [])
  return (
    <ul>
      {list.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}
